<html>    
    <head>        
        <style>             
        body{               
            padding: 0px;    
            margin: 0px;                
            border-width: 0px;            
            }            
        div{                
            padding: 0px;                
            margin: 0px;                
            border-width: 0px;            
        }        
        </style>    
    </head>    
    <body>        
        <script src="src/SVG_kit.js"></script>        
        <script src="src/misc.js"></script>        
        <script src="src/Floating.js"></script>        
        <script src="src/Plot.js"></script>        
        <script>            
            function set_descr(wrapper, color, descr_txt){                
                wrapper.innerHTML = "";                
                let descr = document.createElement("font");                
                descr.style.color = color;                
                descr.innerHTML = descr_txt;                
                wrapper.appendChild(descr);            
            }            
            function get_legend(plot_data){                
                let H = (plot_data.length+1) * 50;                
                let leg = document.createElement("div");                
                leg.style.height = H + "px";                
                function get_pan(){                    
                    let temp = document.createElement("div"); temp.style.height = "50px"; temp.style.width = "100%";                    
                    leg.appendChild(temp);                    
                    temp.style.display = "flex";                    
                    return temp;                
                }                
                for(let d= 0;d<plot_data.length;d++){                    
                    let pan = get_pan();                    
                    let icon_cnv = new SVG_canvas([0,0,50,50]);                    
                    icon_cnv.attach(pan);                    
                    let icon_line = new SVG_path("M 0 25 L 25 12 L 37 37 L 50 25", icon_cnv);                    
                    icon_line.set_stroke( plot_data[d].color, "10%");                    
                    let pan_txt = document.createElement("font"); pan_txt.style.color = "yellow"; pan_txt.style.marginLeft ="10px";                    
                    pan.appendChild(pan_txt);                    
                    pan_txt.innerHTML = plot_data[d].label;                
                }                
                let pan = get_pan();                
                set_descr(pan,  "yellow", "normalized speed up");                
                pan.style.backgroundColor = "#34005c";                
                opacity_mouseover(pan);                
                return leg;            
            }                    
            function get_speed_up(data){                
                let serial_mean = data.serial[0];                
                for(let k=1; k<data.serial.length; k++) serial_mean += data.serial[k];                
                serial_mean = serial_mean / (1.0 * data.serial.length);                
                let speed_up_data=[];                 
                for(let k=0; k<data.parall.length; k++){                    
                    let new_val = {label:data.parall[k].label, color:data.parall[k].color, values:[]};                    
                    for(let t = 0; t<data.parall[k].values.length; t++){                        
                        let vals = [];                        
                        for(let tt=0; tt<data.parall[k].values[t].length; tt++) vals.push( serial_mean / ( data.Threads[t] * data.parall[k].values[t][tt]) );                        
                        new_val.values.push(vals);                    
                    }                    
                    speed_up_data.push(new_val);                
                }                
                return speed_up_data;            
            }        
        </script>        
        <script>
let time_data =
{"serial":[0.234109,0.238344,0.215478,0.235420,0.246513],"Threads":[2,4,6,8],"parall":[{"label":"Query_thread_pool","values":[[0.772134,0.547403,0.504109,0.540586,0.488364],[0.625632,0.620630,0.631585,0.621791,0.619437],[0.914554,0.915253,0.904484,0.911321,0.915464],[1.209576,1.220048,1.224639,1.245907,1.378140]],"color":"red"},{"label":"Shared_tree","values":[[0.141969,0.137559,0.132207,0.140906,0.137145],[0.122378,0.124304,0.122949,0.120746,0.120706],[0.125257,0.125016,0.124447,0.125327,0.126520],[0.125028,0.124375,0.124111,0.124823,0.124964]],"color":"green"},{"label":"Copied_trees","values":[[0.106587,0.116003,0.113346,0.113272,0.110271],[0.073871,0.072089,0.072306,0.071915,0.068347],[0.072948,0.071741,0.074930,0.070626,0.070829],[0.071484,0.066259,0.065921,0.064760,0.065697]],"color":"blue"},{"label":"Multi_agents","values":[[0.049590,0.051625,0.050794,0.051368,0.049033],[0.033151,0.033493,0.032867,0.038206,0.034545],[0.036143,0.037483,0.037831,0.037783,0.039340],[0.037387,0.039448,0.034472,0.034451,0.034799]],"color":"brown"}]};
            let speed_up = get_speed_up(time_data);            
            let plot_time = new Plot(time_data.parall, time_data.Threads, 0.05);            
            document.body.removeChild(plot_time.get_main_div());            
            let plot_speed_up = new Plot(speed_up, time_data.Threads, 0.05);            
            let legend = get_legend(time_data.parall);            
            let Flt = new Floating_div(300, (time_data.parall.length+2) * 50, 50, "#34005c", "black" );            
            Flt.get_body().appendChild(legend);            
            Flt.detach();            
            let show_float = true;            
            function init_corner(plot){                
                let corner =  plot.get_corner();                
                opacity_mouseover(corner);                
                let set_icon = SVG_image.get_div_image("./image/set.svg");                
                corner.appendChild(set_icon.__SVG_frame);                                
                function update_Floating(){                    
                    if(show_float){                        
                        Flt.attach();                        
                        show_float = false;                    
                    }                    
                    else{                        
                        Flt.detach();                        
                        show_float = true;                    
                    }                
                }                
                corner.onclick = ()=>update_Floating();            
            }            
            init_corner(plot_time);            
            init_corner(plot_speed_up);            
            let show_speedup = false;            
            legend.childNodes[legend.childNodes.length-1].onclick = ()=>{                
                if(show_speedup){                    
                    document.body.removeChild(plot_time.get_main_div());                    
                    document.body.appendChild(plot_speed_up.get_main_div());                    
                    set_descr(Flt.get_header(), "yellow", "normalized speed up");                    
                    show_speedup = false;                    
                    console.log("speed set");                
                }                
                else{                    
                    document.body.removeChild(plot_speed_up.get_main_div());                    
                    document.body.appendChild(plot_time.get_main_div());                    
                    set_descr(Flt.get_header(), "yellow", "unormalized times");                    
                    show_speedup = true;                    
                    console.log("time set");                
                }            
            }            
            legend.childNodes[legend.childNodes.length-1].onclick();        
        </script>    
    </body>
</html> 

